<template>
  <div class="movieinfo">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
        @focus="toSearch"
      />
    </form>
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" class="img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 猜你喜欢区域 -->
    <h4>猜你喜欢</h4>
    <div class="swipe2">
      <van-swipe
        :loop="false"
        :width="120"
        class="van1"
        :show-indicators="false"
      >
        <van-swipe-item class="like" v-for="item in movieList" :key="item.id">
          <img :src="item.posters" class="img" alt="" srcset="" />
          <span>{{ item.name }}</span>
          <div class="btn">
            <van-button
              round
              type="info"
              size="small"
              color="linear-gradient(to right, #9b9483, #77664e)"
              @click="toDetails(item.id)"
              >购买</van-button
            >
          </div>
        </van-swipe-item>
        <van-swipe-item> </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 正在热映区域 -->
    <h4>正在热映：</h4>
    <div class="hit">
      <van-card
        v-for="item in movieAll"
        :key="item.id"
        :desc="item.Introduction"
        :title="item.name"
        :thumb="item.posters"
      >
        <template #bottom>
          类型：<van-tag type="warning">{{ item.category }}</van-tag>
        </template>
        <template #footer>
          <van-button
            round
            type="info"
            size="small"
            color="linear-gradient(to right, #9b9483, #77664e)"
            @click="toDetails(item.id)"
            >购买</van-button
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      images: [
        "http://127.0.0.1:3007/images/1659318378508-aaa.jpg",
        "http://127.0.0.1:3007/images/1659318626660-swp1.jpg",
        "http://127.0.0.1:3007/images/1659318696853-swp2.jpg",
      ],
      movieList: [],
      movieAll: [],
    };
  },
  created() {
    this.getMovieList();
    this.getMovieAll();
  },
  methods: {
    onCancel() {
      this.$message("取消");
    },
    async getMovieList() {
      const { data: res } = await this.$http.get("movieinfo");
      if (res.status !== 200) return this.$message.fail("获取电影失败");
       let arr = res.data
      this.movieList = arr.reverse();
    },
    async getMovieAll() {
      const { data: res } = await this.$http.get("movieAll");
      if (res.status !== 200) return this.$message.fail("获取电影失败");
     
      this.movieAll = res.data;
    },
    toDetails(id) {
      this.$router.push({
        path: `/details/${id}`,
      });
    },
    toSearch(){
      this.$router.push('/search')
    }
  },
};
</script>

<style lang="less" scoped>
.swipe,
h4,
.swipe2 {
  margin: 15px;
}
.van-swipe {
  height: 200px !important;
  border-radius: 10px;
}
.img {
  height: 100% !important;
  width: 100% !important;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van1 {
  height: 200px !important;
}
.like {
  height: 200px;
  width: 100%;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  > span {
    font-weight: bold;
    padding: 2px;
  }
}
.img {
  height: 150px;
  overflow: hidden;
  border-radius: 10px;
}
.btn {
  padding: 5px;
  display: flex;
  justify-content: center;
}

</style>